<template>
  <div class="map-tools-container">
    <dl
      v-for="(item,index) in toolsFilter"
      :key="index"
      :class="getClassName(index)"
      @click="handle_function_call(item.action, index)"
    >
      <dt class="iconfont" :class="'icon-' + item.icon" />
      <dd>{{ item.name }}</dd>
    </dl>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils'
export default {
  name: 'MapTools',
  data() {
    return {
      activeIndex: '',
      tools: [
        {
          icon: 'kongzhi',
          name: '设备控制',
          action: 'control'
        },
        {
          icon: 'lunguanzu',
          name: '轮灌组编排',
          action: 'showCell'
        },
        {
          icon: 'plan',
          name: '灌溉计划',
          action: 'showPlan'
        },
        {
          icon: 'fenqu',
          name: '分区管理',
          action: 'showPartition'
        },
        {
          icon: 'plan',
          name: '喷灌计划',
          action: 'showPgPlan'
        },
        {
          icon: 'project',
          name: '项目介绍',
          action: 'showProject'
        },
        {
          icon: 'weather',
          name: this.$t(''),
          action: 'showWeather'
        }
        // ,{
        //   icon: 'map',
        //   name: '设备显示',
        //   action: 'showMarkers'
        // },
        // {
        //   icon: 'dikuai',
        //   name: '地块显示',
        //   action: 'showPolygons'
        // }
      ]
    }
  },
  computed: {
    ...mapGetters(['project']),
    toolsFilter() {
      let toolsFilter = deepClone(this.tools)
      if (!this.project.dg_serialno) {
        toolsFilter = toolsFilter.filter((val) => {
          return !['轮灌组编排', '灌溉计划'].includes(val.name)
        })
      }
      if (!this.project.sprinklerable) {
        toolsFilter = toolsFilter.filter((val) => {
          return !['分区管理', '喷灌计划'].includes(val.name)
        })
      }
      return toolsFilter
    }
  },
  methods: {
    handle_function_call(function_name, index) {
      this.activeIndex = index
      this.$emit(function_name)
    },
    getClassName(index) {
      return index === this.activeIndex ? 'active' : ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
